<template>
    <div class="person">
        <div>
            <el-button type="text" class="title" @click="jump('/follow')">我的关注</el-button>
            <el-button size="mini" style="float: right;" @click="jump('/follow')" type="text">更多></el-button>
            <div>
                <div class="avatar" v-for="user in follow" :key="user.id" style="cursor: pointer;" @click="jump_blank('friend_person',user.id)">
                    <div>
                        <el-avatar style="width: 60px; height: 60px;" fit="fill">
                            <img :src="user.avatarUrl" referrerPolicy='no-referrer'>
                        </el-avatar>
                    </div>
                    <div class="name1">
                        {{ user.name }}
                    </div>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <el-button type="text" class="title" @click="jump('/collect')">我的收藏</el-button>
            <el-button size="mini" style="float: right;" @click="jump('/collect')" type="text">更多></el-button>
            <div>
                <div class="video" v-for="video in collect" :key="video.id">
                    <div @click="router_video(video.id)" style="cursor: pointer;">
                        <el-image style="width: 250px; height: 130px;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;">
                         {{ video.createTime }}
                    </div>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <el-button type="text" class="title" @click="jump('/release')">我的发布</el-button>
            <el-button size="mini" style="float: right;" @click="jump('/release')" type="text">更多></el-button>
            <div>
                <div class="video" v-for="video in release" :key="video.id">
                    <div @click="router_video(video.id)" style="cursor: pointer;">
                        <el-image style="width: 250px; height: 130px;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;">
                         {{ video.createTime }}
                    </div>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <el-button type="text" class="title" @click="jump('/fans')">我的粉丝</el-button>
            <el-button size="mini" style="float: right;" @click="jump('/fans')" type="text">更多></el-button>
            <div>
                <div class="avatar" v-for="user in fans" :key="user.id" style="cursor: pointer;"  @click="jump_blank('friend_person',user.id)">
                    <div>
                        <el-avatar style="width: 60px; height: 60px;" fit="fill">
                            <img :src="user.avatarUrl" referrerPolicy='no-referrer'>
                        </el-avatar>
                    </div>
                    <div class="name1">
                        {{ user.name }}
                    </div>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <el-button type="text" class="title" @click="jump('/modify')">最近观看视频</el-button>
            <el-button size="mini" style="float: right;" @click="jump('/modify')" type="text">更多></el-button>
            <div>
                <div class="video" v-for="video in history" :key="video.id">
                    <div @click="router_video(video.id)" style="cursor: pointer;">
                        <el-image style="width: 250px; height: 130px;border-radius: 10px" :src="video.cover" referrerPolicy='no-referrer'
                            fit="fill"></el-image>
                    </div>
                    <div class="name">
                        <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                    </div>
                    <div style="font-size: 80%;color: #606266;">
                         {{ video.createTime }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            release:[],//用户发布的视频
            collect:[],//用户收藏的视频
            history:[],//最近观看的视频
            follow:[],//用户关注的用户
            fans:[],//用户的粉丝
        }
    },
    methods:{
        //跳转到视频页面
        router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //空方法
        load(){},
        //跳转
        jump(url){
            this.$router.replace(url);
        },
        //_blank跳转
        jump_blank(url_name,id){
            var {href} = this.$router.resolve({
                name:url_name,
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        }
    },
    created(){
        var _this = this
        var id = sessionStorage.getItem('id')
        //获取发布视频
        var video = {
            publisherId:id
        }
        VideoPlayApi.SubmitByUserIdGetRelease(1,3,video).then(res => {
            if(res.data.code == 200){
                _this.release = _this.release.concat(res.data.data.records)
            }
        })
        PersonalCenterApi.SubmitByUserIdGetCollect(1,3,id).then(res => {
            if(res.data.code == 200){
                _this.collect = _this.collect.concat(res.data.data.records)
            }
        })  
        //获取历史记录
        PersonalCenterApi.SubmitByUidGetHistory(1,6,id).then(res => {
            if(res.data.code == 200){
                _this.history = _this.history.concat(res.data.data.records)
            }
        })
        //获取关注的人
        PersonalCenterApi.SubmitByUserIdGetRegard(1,3,id).then(res => {
            if(res.data.code == 200){
                _this.follow = _this.follow.concat(res.data.data.records)
            }
        })
        //获取粉丝信息
        PersonalCenterApi.SubmitByUserIdGetFans(1,3,id).then(res => {
            if(res.data.code == 200){
                _this.fans = _this.fans.concat(res.data.data.records)
            }
        })
    }
};
</script>

<style scoped>
.person{
    text-align: left;
    padding: 15px;
}
.title{
    color: black;
    font-size: 150%;
    font-weight: 600;
}
.name {
    height: 20px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight:inherit;
}
.name1 {
    text-align: center;
    height: 20px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Hiragino Sans GB";
    font-weight:inherit;
    color: rgb(255, 155, 73);
}
.video {
    display: inline-block;
    margin-left: 20px;
    height: 200px;
    width: 250px;
}
.avatar{
    display: inline-block;
    margin-left: 20px;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
</style>